<template>
  <div class="city">
    <header-top
      class="header_top"
      :headTitle="cityName"
      :login="false"
      :goBack="true"
    >
      <template v-slot:changeCity>
        <router-link to="/home" class="city_title">切换城市</router-link>
      </template>
    </header-top>
    <div class="search_box">
      <el-input
        v-model="inputValue"
        placeholder="输入学校/商务楼/地址"
        size="small"
        clearable
      ></el-input>
      <el-button type="primary" class="tj_btn" size="small" @click="submit"
        >提交</el-button
      >
    </div>
    <header class="search_tit" v-if="hisTit">搜索历史</header>
    <ul class="searchRes">
      <li v-for="item in addList" :key="item.name" @click="chooseAdd(item)">
        <div class="resTit">{{ item.name }}</div>
        <div class="resAdd">{{ item.address }}</div>
      </li>
    </ul>
    <div v-if="hasHis && hisTit" class="clearAll" @click="clearAll">
      清空所有
    </div>
    <div v-if="!hisTit && addList.length === 0" class="clearAll">
      很抱歉！无搜索结果
    </div>
  </div>
</template>

<script lang="ts">
import headerTop from "@/components/header/head.vue"; // @ is an alias to /src
import {
  defineComponent,
  ref,
  onBeforeMount,
  onMounted,
  computed,
  reactive,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { searchplace, currentcity } from "@/api/getData";
import { getStore, setStore, removeStore } from "@/utils/store";

export default defineComponent({
  name: "City",
  components: { headerTop },
  setup() {
    // 输入框绑定值
    const inputValue = ref("");
    // 当前选择的城市名
    let cityName = ref("");
    // 当前城市id
    let cityid: any = ref("");
    // 获取路由对象
    const $route = useRoute();
    const $router = useRouter();
    // 历史地址列表或搜索结果
    let addList = ref([]);
    // 控制搜索历史标题是否显示
    let hisTit = ref(true);
    // 控制清空所有是否显示
    let hasHis = ref(false);
    // 从路由参数获取城市id
    cityid = $route.params.cityid;
    // 获取当前城市名
    currentcity(cityid).then((res) => {
      cityName.value = res.name;
    });

    // 获取初始搜索历史列表
    function initData() {
      const arr: any = getStore("placeHistory");

      if (arr) {
        addList.value = JSON.parse(arr);
        console.log(addList.value);

        hasHis.value = true;
      } else {
        addList.value = [];
      }
    }

    // 提交确认搜索
    const submit = () => {
      const params = {
        type: "search",
        city_id: cityid,
        keyword: inputValue.value,
      };
      if (inputValue.value) {
        searchplace(params).then((res) => {
          addList.value = res;
          hisTit.value = false;
        });
      }
    };

    // 选择地址
    function chooseAdd(item: any) {
      console.log(item);
      const arr: any = getStore("placeHistory");
      if (arr) {
        const arr1 =  JSON.parse(arr)
        const res = arr1.filter(
          (i: { name: any; [propName: string]: any }) => {
            i.name == item.name;
          }
        );
        console.log(res);
        if (res && res.length > 1) {
          return;
        } else {
          arr1.push(item);
          setStore("placeHistory", arr1);
        }
      } else {
        setStore("placeHistory", [item]);
      }
      console.log(item);
      const geohash = item.geohash
      $router.push({path:"/main",query:{geohash}});
    }

    // 清空搜索历史
    function clearAll() {
      addList.value = [];
      removeStore("placeHistory");
    }

    onBeforeMount(() => {
      console.log(111);

      initData();
    });

    // mounted
    onMounted(() => {
      console.log(2222);
      // this.initData();
    });
    return {
      inputValue,
      submit,
      cityName,
      addList,
      hisTit,
      hasHis,
      chooseAdd,
      clearAll,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.city {
  padding-top: 1.95rem;

  .header_top {
    .city_title {
      @include sc(0.5rem, #fff);
      // @include ct;
      padding-right: 0.4rem;
    }
  }
  .search_box {
    margin-top: 0.5rem;
    padding: 0.5rem 0.8rem;
    background-color: #fff;
    border: 1px solid $bc;
  }

  .tj_btn {
    margin-top: 0.5rem;
    width: 100%;
  }

  .search_tit {
    text-align: left;
    font-size: 0.5rem;
    border-bottom: 1px solid $bc;
    padding: 0.1rem 0.5rem;
  }
  .searchRes {
    li {
      padding: 0.5rem 0.8rem;
      border-bottom: 1px solid $bc;
      div {
        text-align: left;
      }
      .resTit {
        @include sc(0.7rem, #333);
        margin-bottom: 0.4rem;
      }
      .resAdd {
        @include sc(0.5rem, #666);
      }
    }
  }
  .clearAll {
    height: 2rem;
    line-height: 2rem;
    @include sc(0.7rem, #333);
  }
}
</style>
